<template>
<view class="container">
<uni-nav-bar title="优惠券" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
  <text class="title">可使用优惠券{{dataList.length}}张</text>
  <view class="coupon-list">
    <view v-for="(item, index) in dataList" :key="index" class="item" @tap="check" :data-check="item.id">
      <image class="bg" src="/static/static/images/优惠券.png" mode="aspectFill"></image>
      <view class="content">
        <view class="left">
          <view class="name">{{item.coupon.name}}</view>
          <view class="time">全场满{{item.coupon.minPoint}}减{{item.coupon.amount}}</view>
        </view>
        <view class="right">
          ￥
          <text class="a">{{item.coupon.amount}}</text>
        </view>
      </view>
      <image class="tag" :hidden="item.checked==null" src="/static/static/images/couponchecked.png"></image>
      <view class="condition">
        <text class="txt">有效期至{{item.coupon.endTime}}</text>
        <text class="r">{{item.coupon.typeValue}}</text>
      </view>
    </view>
  </view>
  <view class="submit" @tap="submit">确认使用</view>
</view>
</template>

<script>
// pages/shopping/coupon/chooseCoupon.js
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
var app = getApp();
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
//当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
import login from "../../component/login/login";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      dataList: [],
      id: 0
    };
  },

  components: {
    login,
	uniNavBar
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("==choose coupon cartId==" + options.cartId);
    this.loadData();
  },
  methods: {
	  goback(){
		  uni.navigateBack()
	  },
    loadData() {
      let that = this;
      uni.showLoading();
      util.request(api.CouponList, {
        useStatus: 0
      }).then(function (res) {
        uni.hideLoading();

        if (res.errno == 0) {
          console.log(JSON.stringify(res.data));
          that.setData({
            dataList: res.data.records
          });
        } else if (res.status == 500) {
          that.showLogin();
        }
      });
    },

    check: function (e) {
      console.log("==check==" + JSON.stringify(e.currentTarget.dataset.check));
      var id = e.currentTarget.dataset.check;
      var dataList = this.dataList;
      dataList.forEach(e => {
        if (id == e.id) {
          e.checked = true;
        } else {
          e.checked = null;
        }
      });
      this.setData({
        dataList: dataList,
        id: id
      });
    },
    submit: function () {
      var that = this;
      const eventChannel = this.getOpenerEventChannel();
      uni.navigateBack({
        delta: 1,
        success: function (res) {
          eventChannel.emit('onFinish', that.id);
        }
      });
    }
  }
};
</script>
<style>
page{
  background: #f1f1f1;
  min-height: 100%;
}

.container{
  min-height: 100%;
}

.title {
  font-size: 26rpx;
  color: #b2b2b2;
  margin: 30rpx;
}

.coupon-list{
width: auto;
height: auto;
overflow: hidden;
margin: 20rpx 30rpx;
}

.item{
position: relative;
height: 240rpx;
width: 690rpx;
margin-bottom: 30rpx;
}

/* .tag{
height: 32rpx;
background: #A48143;
padding-left: 16rpx;
padding-right: 16rpx;
position: absolute;
left: 20rpx;
color: #fff;
top: 20rpx;
font-size: 20rpx;
text-align: center;
line-height: 32rpx;
} */

.item .bg {
width: 100%;
height: 100%;
position: absolute;
}
.tag{
  height: 50rpx;
  width: 50rpx;
  position: absolute;
  border-top-right-radius: 10rpx;
  right: 8rpx;
}
.content{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
padding: 30rpx;
}

.content .left{
flex: 1;
}

.name{
font-size: 36rpx;
line-height: 38rpx;
color: #fff;
margin-bottom: 16rpx;
}

.time{
font-size: 28rpx;
color: #fff;
line-height: 30rpx;
}

.content .right{
color: #fff;
font-size: 30rpx;
}
.content .right .a{
color: #fff;
font-size: 80rpx;
}

.condition {
width: 100%;
bottom: 0;
left:0;
height: 78rpx;
padding: 22rpx 40rpx;
display: flex;
flex-direction: row;
position: absolute;
}

.condition .txt{
display: block;
height: 30rpx;
flex: 1;
overflow: hidden;
font-size: 24rpx;
line-height: 30rpx;
color: #fff;
}


/* .condition .icon{
margin-left: 30rpx;
width: 24rpx;
height: 24rpx;
} */
.condition .r{
height: 24rpx;
color: white;
}

.submit {
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #b28850;
  border-radius: 35rpx;
  color: #fff;
  margin: 30rpx 40rpx;
  text-align: center;
  font-size: 30rpx;
  position: absolute;
  bottom: 0rpx;
}
</style>